<script setup>
import { reactive, ref,defineExpose } from 'vue'
import UploadList from '@/components/app/uploadList.vue'
const ruleFormRef = ref()
const rules = reactive({
	title: [{ required: true, message: '页面标题不能为空', trigger: 'blur' }],
	promot: [
		{
			required: true,
			message: '推广页面不能为空',
			trigger: 'change'
		}
	],
	logo: [{ required: true, message: '企业logo不能为空' }],
	poster: [{ required: true, message: '企业logo不能为空' }],
	name: [{ required: true, message: '页面标题不能为空', trigger: 'blur' }],
	guide: [{ required: true, message: '页面标题不能为空', trigger: 'blur' }]
})
const ruleForm = reactive({
	h5_title:'',
	h5_type:'',
	h5_one_logo:'',
	h5_one_qyname:'',
	h5_one_is_introduce:'',
	h5_one_introduce:'',
	h5_one_guidance:'',
	h5_tow_bg:'',
	h5_tow_style:'',
	group_data:'',
	group_welcome:''
})
const getUploadImg = (val) => {
	ruleForm.h5_one_logo = val.url
}
const getPostImg = (val) => {
	ruleForm.h5_tow_bg = val.url
}
const submitForm = async () => {
	if (!ruleFormRef.value) return
	await ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			console.log('submit!')
		} else {
			console.log('error submit!', fields)
		}
	})
}
const show = (val)=>{
	// console.log(val)
	// ruleForm.type = val.type
	// ruleForm.name = val.name
	// ruleForm.staffs = val.staffs
	// ruleForm.remin_status = val.remin_status
	// ruleForm.ttime = val.ttime
	// ruleForm.task_state = val.task_state
	// ruleForm.promotion_welcome = val.promotion_welcome
	// ruleForm.promotion_type = val.promotion_type
	// ruleForm.end_time = val.end_time
	// console.log(ruleForm)
}
const shows = ()=>{
	return ruleForm
}	

defineExpose({
  show,shows
})
</script>
<template>
	<div class="post-warp">
		<div class="post-left">
			<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
				<el-form-item label="页面标题：" prop="h5_title">
					<el-input style="width: 360px" placeholder="例：扫码领福利吧" v-model="ruleForm.h5_title" />
				</el-form-item>
				<el-form-item label="推广页面：" prop="h5_type">
					<el-radio-group v-model="ruleForm.h5_type">
						<el-radio :label="1">默认样式</el-radio>
						<el-radio :label="2">自定义样式</el-radio>
					</el-radio-group>
				</el-form-item>
				<div v-if="ruleForm.h5_type === 1">
					<el-form-item label="企业logo：" prop="h5_one_logo">
						<UploadList :uploadType="{ type: 'image' }" text="添加图片" @getImg="getUploadImg($event, val)" />
					</el-form-item>
					<el-form-item label="企业名称：" prop="h5_one_qyname">
						<el-input style="width: 360px" placeholder="请输入企业名称" v-model="ruleForm.h5_one_qyname" />
					</el-form-item>
					<el-form-item label="企业介绍：">
						<el-switch v-model="ruleForm.h5_one_is_introduce" style="margin-right: 8px" active-value="1" inactive-value="2" />{{ ruleForm.h5_one_is_introduce==1 ? '已开启' : '已关闭' }}
					</el-form-item>
					<el-form-item v-show="ruleForm.h5_one_is_introduce == 1" style="margin-top: -15px" prop="introduce">
						<el-input style="width: 360px" placeholder="请输入企业介绍" v-model="ruleForm.introduce" />
					</el-form-item>
					<el-form-item label="扫码引导语：" prop="h5_one_guidance">
						<el-input style="width: 360px" placeholder="例：扫码领福利吧" v-model="ruleForm.h5_one_guidance" />
					</el-form-item>
				</div>

				<div v-else>
					<el-form-item label="海报：" prop="poster">
						<div class="poster-box">
							<UploadList :uploadType="{ type: 'image' }" text="上传海报" @getImg="getPostImg($event, val)" />
							<div class="tips">
								<p>海报设计须知：</p>
								<p>1、尺寸：720*1280，分辨率72</p>
								<p>2、海报其他部分皆可自定义设计</p>
								<p>3、海报大小不超过2M</p>
								<p>4、二维码最小尺寸48*48</p>
							</div>
						</div>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<div class="post-right" :style="{ marginLeft: ruleForm.h5_type === 1 ? '0px' : '24px' }">
			<div class="preview-wrap">
				<img src="https://assets.weibanzhushou.com/web/we-work-webapp/phonePreview.ef61390b8fe4.jpg" class="bg" />
				<div class="preview-content">
					<div class="link-inner" v-show="ruleForm.h5_type === 1">
						<div class="link-card">
							<div class="top-info" style="width: 100%">
								<img v-if="ruleForm.h5_one_logo" :src="ruleForm.h5_one_logo" class="crop-icon" />
								<img
									v-else
									class="crop-icon"
									src="https://assets.weibanzhushou.com/web/we-work-webapp/avatar-room-default.67bead38e751.svg"
									alt=""
								/>
								<div class="right-info">
									<div class="group-name">月饼之家</div>
									<div class="small-des des">{{ ruleForm.introduce }}</div>
								</div>
							</div>
							<div class="entry-group-qr">
								<img
									src="https://assets.weibanzhushou.com/web/we-work-webapp/area-code_default-qr-code.f0e9c90e83a0.jpg"
									class="qr-icon"
								/>
							</div>
							<div class="small-des scan-text" style="width: 120%">
								<img src="https://assets.weibanzhushou.com/web/we-work-webapp/finger.9b16331ca887.png" class="finger" />
								长按识别二维码
							</div>
						</div>
					</div>
					<div v-show="ruleForm.h5_type === 2">
						<div v-if="ruleForm.h5_type" style="width: 100%; height: 401.35135135135135px">
							<img :src="ruleForm.h5_type" style="height: 401.35135135135135px" class="poster" />
						</div>
					</div>
					<img
						v-show="ruleForm.h5_type === 2"
						src="https://assets.weibanzhushou.com/web/we-work-webapp/qr_qr-preview.884b64115b0a.png"
						style="
							position: absolute;
							left: 131.75675675675677px;
							top: 248.31081081081084px;
							width: 83.10810810810811px;
						"
					/>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.poster-box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	:deep(.upload-icon) {
		width: 204px;
		height: 368px;
	}
	.poster {
		width: 225px;
	}
	.tips {
		background: #fff7f0;
		border: 1px solid #ffdcc9;
		border-radius: 3px;
		font-size: 13px;
		padding: 12px 21px;
		color: #bb5223;
		margin-bottom: 33px;
		line-height: 22px;
		min-width: 238px;
		height: 161px;
		p {
			margin-bottom: 5px;
		}
	}
}

.post-warp {
	display: flex;
	width: 100%;
	height: 100%;
	.post-left {
		width: 55%;
	}
	.post-right {
		width: 45%;
		height: 100%;
		.preview-wrap {
			position: relative;
			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 274px;
			}
			.preview-content {
				width: 225px;
				height: 345px;
				position: relative;
				z-index: 2;
				left: 24px;
				top: 98px;
				display: -webkit-box;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				flex-direction: column;
				max-height: 345px;
				overflow-x: hidden;
				overflow-y: auto;
				.link-inner {
					display: flex;
					-webkit-box-align: center;
					align-items: center;
					-webkit-box-flex: 1;
					flex: 1;
					padding-left: 9px;
					overflow: auto;
					background: -webkit-linear-gradient(135deg, #a1d2ff, #e5f3ff);
					background: linear-gradient(315deg, #a1d2ff, #e5f3ff);
					.link-card {
						width: 95%;
						height: 85%;
						background: #fff;
						border-radius: 4px;
						display: -webkit-box;
						display: flex;
						-webkit-box-pack: center;
						justify-content: center;
						-webkit-box-align: center;
						align-items: center;
						-webkit-box-orient: vertical;
						-webkit-box-direction: normal;
						flex-direction: column;
						.finger {
							width: 13px;
							margin-right: 8px;
							border-style: none;
							vertical-align: middle;
						}
						.scan-text {
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.scan-text.small-des {
							font-size: 13px;
							color: rgba(0, 0, 0, 0.45);
							transform: scale(0.7);
						}
						.small-des {
							font-size: 13px;
							color: rgba(0, 0, 0, 0.45);
							transform: scale(0.7) translateX(-20%);
						}
						.entry-group-qr {
							display: -webkit-box;
							display: flex;
							-webkit-box-align: center;
							align-items: center;
							.qr-icon {
								width: 131px;
								height: 131px;
								margin: 18px auto 15px;
							}
						}
						.top-info {
							display: -webkit-box;
							display: flex;
							padding-left: 24px;
							-webkit-box-align: start;
							align-items: flex-start;
							.group-name {
								font-size: 11px;
								font-weight: 700;
								color: #000;
							}

							.crop-icon {
								width: 34px;
								height: 34px;
								margin-right: 8px;
								background: #fff;
								border-radius: 2px;
							}
							.right-info {
								display: -webkit-box;
								display: flex;
								-webkit-box-orient: vertical;
								-webkit-box-direction: normal;
								flex-direction: column;
								-webkit-box-align: start;
								align-items: flex-start;
							}
						}
					}
				}
			}
		}
	}
}
</style>
